<div class="previews {showPreview?'show':'hide'}" draggable="true" on:click={()=>{
    showDownloadImgSizePanel=false;
}}>
    <div id="slider" class="swipe">
        <div class="swipe-wrap">
            {#each list as {src},index}
                <div class="preview section">
                    <div class="preview_img_c" >
                        <img class="preview_img" on:touchstart={touchImgStart} on:touchend={touchImgEnd} src={index>showPreviewIndex-2&&index<showPreviewIndex+2?src.large:''} alt="">
                        {#if downloadProgressList[index]&&downloadProgressList[index]!=0&&downloadProgressList[index]!=1}
                            <p>{(downloadProgressList[index]*100).toFixed(2)}%</p>
                        {/if}
                        <div class="operation {showOperation?'show':'hide'}">
                            <div class="close operation_item" on:click={close}>
                                <Icon data={timesCircle} scale="2"/>			
                            </div>
                            <div class="downloadImg operation_item" on:click|stopPropagation={()=>{
                                showDownloadImgSizePanel=true;
                            }}>
                                <Icon data={arrowCircleDown} scale="2"/>
                                    <div class="downloadImgConfig {showDownloadImgSizePanel?'show':'hide'}">
                                        {#each imgSizes as item,sizeIndex}
                                            <span on:click|stopPropagation={()=>{
                                                downloadImg(item.type,index)
                                            }} class="selectImgSizeConfig">{item.name}</span>
                                        {/each}
                                    </div>			
                            </div>
                            
                        </div>
                    </div>
                </div>
            {/each}
        </div>
    </div>
</div>

<script>
    import {arrowCircleDown,timesCircle} from 'svelte-awesome/icons';
    import {createEventDispatcher,onMount} from "svelte"
    import AlloyFinger from "AlloyFinger"
    import Icon from 'svelte-awesome';
    let imgSizes = [{name:"原图",type:"original_1"},{name:"原图80%",type:"original_0.8"},{name:"原图50%",type:"original_0.5"},{name:"原图30%",type:"original_0.3"},{name:"原图10%",type:"original_0.1"},{name:"大",type:"large2x_1"},{name:"中",type:"large_1"}]
    let showPreview=false;
    export let showPreviewIndex=0;
    export let list=[];
    const dispatch = createEventDispatcher();
    let showDownloadImgSizePanel=false;
    let showOperation=false;
    let swipe=null;
    let downloadProgressList={};
    onMount(()=>{
        var af = new AlloyFinger(document.querySelector(".previews"), {
			swipe: function (evt) {
				evt.preventDefault()
				if(evt.direction=="Down"){
					close();
				}
			},
			touchMove(){
				
			}
		});
    })
    export function ctrl(status){
        showPreview=status;
    }
    function close(){
        showPreview=false;
        dispatch("status",false)
    }
    function initSwipe(){
        console.log("初始化swipe")
        swipe&&swipe.kill&&swipe.kill();
        swipe=new Swipe(document.getElementById('slider'), {
            startSlide: showPreviewIndex,
            speed: 0,
            auto: 0,
            continuous: true,
            disableScroll: true,
            stopPropagation: false,
            callback: function(index, elem) {},
            transitionEnd: function(index, elem) {
                showPreviewIndex=index;
            }
        });
    }
    $:initSwipe(list);
    $:changeshowPreviewIndex(showPreviewIndex);
    function changeshowPreviewIndex(showPreviewIndex){
		swipe&&swipe.slide&&swipe.slide(showPreviewIndex,500)
    }
    $:((showPreview)=>{
        dispatch("status",showPreview)
    })(showPreview);
    function touchImgStart(){
		showOperation=true;
	}
    let touchImgEndTimeout=null;
	function touchImgEnd(){
		clearTimeout(touchImgEndTimeout)
		touchImgEndTimeout=setTimeout(function(){
			showOperation=false;
		},3000)
	}
	function downloadImg(type,index){
		let item=list[showPreviewIndex];
		let types=type.split("_")
		showDownloadImgSizePanel=false;
		try{
			window.$G.getImageToPhotos({
				url:item.src[types[0]],
				ratio:types[1],
				onProgress(info){
                    downloadProgressList[index]=info.progress
                    console.log(downloadProgressList,"downloadProgressList")
				},
				success(info){
					toast("下载成功")
				},
				fail(err){
					toast("下载异常，请重新尝试")
				}
			})
		}catch(e){

		}
	}
	function toast(str){
		Toastify({
			text: str,
			duration: 3000,
			newWindow: true,
			close: false,
			gravity: "bottom", 
			position: "center",
			stopOnFocus: true,
			backgroundColor: "gray",
		}).showToast();
	}
</script>

<style>
    .previews{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 4;
	transform: translateY(100%);
	transition: all ease 0.8s;
	overflow: hidden;
    }
    .previews.show{
        transform: translateY(0%);
    }
    .previews.hide{
        transform: translateY(100%);
    }
    .preview{
        width: 100%;
        height: 100vh;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .preview_img_c{
        /* position:relative; */
        /* margin: 7%; */
    }
    .preview_img{
        max-width: 90vw;
        max-height: 90vh;
        display: block;
        margin: auto;
        /* padding: 6%; */
        /* box-sizing: border-box; */
    }
    .operation{
        position: absolute;
        left: 0rem;
        right: 0rem;
        bottom: 0rem;
        color: white;
        display: flex;
        background: #e9e9e9bd;
        align-items: center;
        justify-content: center;
        margin: 0px auto;
        transition: transform ease 0.5s;
        transform: translateY(100%);
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        box-sizing: border-box;
    }
    .operation.show{
        transform: translateY(0%);
    }
    .operation.hide{
        transform: translateY(100%);
    }
    .operation_item{
        margin: 0px 1rem;
    padding: 1rem 0px;
    box-sizing: border-box;
    position: relative;
    }
    .downloadImgConfig {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-30%,-106%);
    background: #ffffff;
    width: 10rem;
    border-radius: 0.5rem;
    color: #272727;
    box-shadow: #bebebe 0px 0px 10px;
    }
    .downloadImgConfig.hide{
    display: none;
    }
    .selectImgSizeConfig{
    display: block;
    padding: 1rem 1rem !important;
    box-sizing: border-box;
    margin: 0px 0.5rem;
    }
    .close{
        color: rgb(255, 255, 255);
    }
    .swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}



</style>